質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

1回答

2425閲覧

npmでインストールしたjsファイルをwebpackを使ってビルドさせる方法

kuriya

総合スコア35

npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2017/04/05 05:14

WordPressのスターターテンプレートとしてSageを使っています。
Sageではデフォルトでwebpackが入っているのですがその設定を破綻させずにnpmでインストールしたjsファイルを読み込みたいです。
assets/build/webpack.config.js
を修正するようなのですが、どこをどうして良いものなのか分かりません。

'use strict'; // eslint-disable-line const webpack = require('webpack'); const merge = require('webpack-merge'); const autoprefixer = require('autoprefixer'); const CleanPlugin = require('clean-webpack-plugin'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); const CopyGlobsPlugin = require('copy-globs-webpack-plugin'); const config = require('./config'); const assetsFilenames = (config.enabled.cacheBusting) ? config.cacheBusting : '[name]'; const sourceMapQueryStr = (config.enabled.sourceMaps) ? '+sourceMap' : '-sourceMap'; let webpackConfig = { context: config.paths.assets, entry: config.entry, devtool: (config.enabled.sourceMaps ? '#source-map' : undefined), output: { path: config.paths.dist, publicPath: config.publicPath, filename: `scripts/${assetsFilenames}.js`, }, module: { rules: [ { enforce: 'pre', test: /\.js?$/, include: config.paths.assets, use: 'eslint', }, { test: /\.js$/, exclude: [/(node_modules|bower_components)(?![/|\\](bootstrap|foundation-sites))/], loader: 'buble', options: { objectAssign: 'Object.assign' }, }, { test: /\.css$/, include: config.paths.assets, use: ExtractTextPlugin.extract({ fallback: 'style', publicPath: '../', use: [ `css?${sourceMapQueryStr}`, 'postcss', ], }), }, { test: /\.scss$/, include: config.paths.assets, use: ExtractTextPlugin.extract({ fallback: 'style', publicPath: '../', use: [ `css?${sourceMapQueryStr}`, 'postcss', `resolve-url?${sourceMapQueryStr}`, `sass?${sourceMapQueryStr}`, ], }), }, { test: /\.(ttf|eot|png|jpe?g|gif|svg|ico)$/, include: config.paths.assets, loader: 'file', options: { name: `[path]${assetsFilenames}.[ext]`, }, }, { test: /\.woff2?$/, include: config.paths.assets, loader: 'url', options: { limit: 10000, mimetype: 'application/font-woff', name: `[path]${assetsFilenames}.[ext]`, }, }, { test: /\.(ttf|eot|woff2?|png|jpe?g|gif|svg)$/, include: /node_modules|bower_components/, loader: 'file', options: { name: `vendor/${config.cacheBusting}.[ext]`, }, }, ], }, resolve: { modules: [ config.paths.assets, 'node_modules', 'bower_components', ], enforceExtension: false, }, resolveLoader: { moduleExtensions: ['-loader'], }, externals: { jquery: 'jQuery', }, plugins: [ new CleanPlugin([config.paths.dist], { root: config.paths.root, verbose: false, }), /** * It would be nice to switch to copy-webpack-plugin, but * unfortunately it doesn't provide a reliable way of * tracking the before/after file names */ new CopyGlobsPlugin({ pattern: config.copy, output: `[path]${assetsFilenames}.[ext]`, manifest: config.manifest, }), new ExtractTextPlugin({ filename: `styles/${assetsFilenames}.css`, allChunks: true, disable: (config.enabled.watcher), }), new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery', Tether: 'tether', 'window.Tether': 'tether', }), new webpack.LoaderOptionsPlugin({ minimize: config.enabled.optimize, debug: config.enabled.watcher, stats: { colors: true }, }), new webpack.LoaderOptionsPlugin({ test: /\.s?css$/, options: { output: { path: config.paths.dist }, context: config.paths.assets, postcss: [ autoprefixer({ browsers: config.browsers }), ], }, }), new webpack.LoaderOptionsPlugin({ test: /\.js$/, options: { eslint: { failOnWarning: false, failOnError: true }, }, }), ], }; /* eslint-disable global-require */ /** Let's only load dependencies as needed */ if (config.enabled.optimize) { webpackConfig = merge(webpackConfig, require('./webpack.config.optimize')); } if (config.env.production) { webpackConfig.plugins.push(new webpack.NoEmitOnErrorsPlugin()); } if (config.enabled.cacheBusting) { const WebpackAssetsManifest = require('webpack-assets-manifest'); webpackConfig.plugins.push( new WebpackAssetsManifest({ output: 'assets.json', space: 2, writeToDisk: false, assets: config.manifest, replacer: require('./util/assetManifestsFormatter'), }) ); } if (config.enabled.watcher) { webpackConfig.entry = require('./util/addHotMiddleware')(webpackConfig.entry); webpackConfig = merge(webpackConfig, require('./webpack.config.watch')); } module.exports = webpackConfig;

多分

module: { rules: [

の箇所に追記する気がするのですが…
ちなみに追加したいjsファイルは
node_modules/google-code-prettify/bin/prettify.min.js
node_modules/google-code-prettify/bin/run_prettify.min.js

後多分cssを追加する必要もありそうです。
node_modules/google-code-prettify/bin/prettify.min.css

どなたかご教授いただければ幸いです。

よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

webpackを使っているのであれば、moduleを読み込みたい箇所でrequireしてあげればよいのではないでしょうか?

例えば、app.jsで必要なmoduleを読み込みたい場合、
app.js上で、

javascript

1require(google-code-prettify/bin/prettify.min.css); 2require(google-code-prettif);

と記述する。とか…

全く見当違いな回答をしていたら申し訳ございませんm(__)m

投稿2017/04/07 05:51

tarotarosu

総合スコア114

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問