webpackプロジェクト応用

初期化npm

npm init

webpackをインストールします.

npm install webpack --save--dev

プロジェクトを作成するために必要なフォルダ

mkdir src

mkdir dist

ルートディレクトリで初期化index.を作成し、パッケージ化されたjsファイルを紹介します.

webpackプロファイルwebpack.co.nfig.jsを します.webpackは にこのファイルを して します.
ファイルには の が されています.

var path = require('path')
module.exports = {
  entry: './src/script/main.js',//     
  output: {
    path: path.resolve(__dirname, './dist/js'), //        
    filename: 'bundle.js'//        
  }
}

にパスモジュールを していないと、エラーが します. が わったら、 ラインでwebpackを します.jsファイルをDIst/js/bundle.jsファイルに に できます.
webpack.co.nfig.jsをwebpack.dev.co.nfig.jsと した 、 webpackは えません.コマンドを して のようにします.

webpack --config webpack.dev.config.js

webpackパッケージ を します.package.jsonファイルのscripts の は の りです.
する はnpm run webpackを するだけでファイルを できます.
プラグインhtml-webpack-pluginを して、まずプラグインをインストールしてから、 の を します.
html WebpackPlugin({template:'index])、ルートディレクトリindex.をテンプレートに、 にindexを します.
プラグインの な と のスクリーンショット:
ページのアプリケーションの は の りです.